<template>
	<view style="text-align: center;">
		<button @click="select">选择图片</button>
		<image mode="widthFix" :src="cropImgUrl" />
		<ksp-cropper mode="free" :width="width" :height="height" :maxWidth="1024" :maxHeight="1024" :url="origImgUrl"
			@cancel="onCancel" @ok="onOK"></ksp-cropper>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import projectConfig from '@/common/config.js';

	export default {
		data() {
			return {
				width: 200, //宽度
				height: 200, //高度
				origImgUrl: '', // 需要裁剪的图片路径
				cropImgUrl: '' // 裁剪后的图片路径
			}
		},
		computed: {
			...mapGetters(['isLogin', 'userInfo'])
		},
		onLoad(options) {
			if (options.tempFilePaths) {
				this.origImgUrl = options.tempFilePaths
			}
		},
		methods: {
			select() {
				uni.chooseImage({
					count: 1,
					success: (rst) => {
						// 设置url的值，显示控件
						this.origImgUrl = rst.tempFilePaths[0];
					}
				});
			},
			onOK(ev) {
				this.origImgUrl = '';
				this.cropImgUrl = ev.path;
				this.uploadPhoto();
			},
			onCancel() {
				// url设置为空，隐藏控件
				this.origImgUrl = '';
			},

			// 上传图片到服务器
			uploadPhoto() {
				uni.showLoading({
					title: '正在上传'
				})
				const uploadUrl = '/api/App_Upload/UploadFile';
				const headerConfig = this.$sign.buildHeaderSign(uploadUrl, this.userInfo, {}, 'POST'); // 生成签名
				//上传到服务器
				uni.uploadFile({
					url: projectConfig.baseUrl + uploadUrl,
					filePath: this.cropImgUrl, //要上传文件资源的路径 (本地路径)
					name: 'photo', //文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容
					header: headerConfig,
					formData: {}, //HTTP 请求中其他额外的 form data       
					success: res => {
						uni.hideLoading()
						var jsonObj = this.$tools.parseJsonObject(res.data)
						if (jsonObj.code == 100) {
							//保存成功 
							this.updateHeadImg(jsonObj.data.relativeUrl)
						} else {
							//保存失败							
							uni.showToast({
								title: jsonObj.msg,
								icon: 'error'
							})
						}
					},
					fail: err => {
						uni.hideLoading()
						uni.showToast({
							title: '上传图片错误：' + JSON.stringify(err),
							icon: 'error'
						})
					}
				})
			},

			// 保存头像
			updateHeadImg(userlogo) {
				this.$api.user.updateUserBaseInfo({
					info: {
						avatar_url: userlogo
					}
				}).then(res => {
					this.userInfo.avatar_url = userlogo
					this.$store.dispatch('updateUserInfo', this.userInfo)
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				})
			}
		}
	}
</script>

<style>

</style>